<template>
    <div class="page">
      <div id="echartsChart" style="width: 100%;height: 300px;"></div>
      <div style="margin-top:20px;height: 400px;
    overflow: auto;" class="tableScroll">
        <a-table :columns="columnsList.columns" :data-source="columnsList.datatable" :pagination="false" 
        :loading="loading"      >
         <span slot="rowIndex" slot-scope="text">{{ text }}</span>
        </a-table>

      </div>
    </div>
</template>
<script>
import { echartsApi as ds } from "@/services";
import * as echarts from "echarts";
export default {
  name: "datastatistics", 
  data() {
    return {
      loading: false,      
      option : {
        tooptip:{
            trigger:"axis",
            axisPointer:{
                type:"shadow"
            }
        },
        xAxis: {
            type: 'category',
            data: [],
            axisLabel:{
                interval:0,
                rotate:40
            },
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: [],
            type: 'line'
            }
        ]
        },
        columnsList: {
        columns: [
          {
            title: '序号',
            dataIndex: 'name',
            customRender: function (text, record, index) {
              return parseInt(index) + 1
            },
            align: "center"
          },
          {
            title: '试剂盒名称',
            dataIndex: 'kitName',
            key: 'kitName',
            align: "center"
          },
          {
            title: '基因座数量',
            dataIndex: 'locusNum',  
            key: 'locusNum',          
            align: "center",  
          },
          {
            title: '基因座占比',
            dataIndex: 'locusPer',  
            key: 'locusPer',          
            align: "center",           
          }, 
          


        ],
        datatable: []
      },

    
    
      
    };
  },
  created() {
    this.$nextTick(function(){
        this.getEchartsList();  
    })

       
  },
  mounted(){
      window.addEventListener('resize', this.getEchartsList);
  },
  methods: {
    getEchartsList() {
      this.loading = true;    
      ds.queryKitOfLocusInfos({kkitName:''}).then((res) => {
        if (res.retcode == "success") {  
          this.columnsList.datatable=  res.data.locusInfosVOS   
          this.columnsList.datatable.push({kitId: "总计",
            kitName: "总计",
            locusNum: res.data.amountTotal,
            locusPer: res.data.ratioTotal})  
          this.loading = false;        
            let hxAxis=[]
            let zxAxis=[]
            res.data.locusInfosVOS.forEach((item)=>{
                hxAxis.push(item.kitName)
                zxAxis.push(item.locusNum)
            })
            this.option.xAxis.data = hxAxis;
            this.option.series[0].data = zxAxis;
       
        let  chartDom = document.querySelector('#echartsChart')        
        this.option&&echarts.init(chartDom).setOption(this.option,true)
        }
      });
      

   

     
      
    },

    
  },
};
</script>
<style scoped lang="less">
.page{   
    padding: 0 24px;
    background-color: #fff;
}


/* 整个滚动条 */
.tableScroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* 滚动条上的滚动滑块 */
.tableScroll::-webkit-scrollbar-thumb {  
    /* 关键代码 */
    background-image: -webkit-linear-gradient(45deg,
            rgba(255, 255, 255, 0.4) 25%,
            transparent 25%,
            transparent 50%,
            rgba(255, 255, 255, 0.4) 50%,
            rgba(255, 255, 255, 0.4) 75%,
            transparent 75%,
            transparent);
    border-radius: 32px;
}

/* 滚动条轨道 */
.tableScroll::-webkit-scrollbar-track {
    background-color: #dbeffd;
    border-radius: 32px;
}

</style>